import type { TypedOptions } from 'typed.js'
import type { Ref } from 'vue'

import Typed from 'typed.js'

interface UseTypedType {
  instance: Ref<Typed | null>
  contentRef: Ref<HTMLElement | null>
  content: string
  callback?: () => void
  send?: () => void
  options?: TypedOptions
}

/** 文本自动打字 */
export function useTyped({
  instance,
  contentRef,
  content,
  callback,
  send,
  options
}: UseTypedType) {
  const initTyped = () => {
    if (instance.value) {
      instance.value.destroy()
    }

    instance.value = new Typed(contentRef.value, {
      strings: [content],
      typeSpeed: 60,
      backSpeed: 60,
      backDelay: 10000,
      cursorChar: '_',
      shuffle: true,
      loop: true,
      onLastStringBackspaced: () => {
        callback && callback()
      },
      onComplete: () => {
        send && send()
      },
      ...options,
    })
  }

  return {
    initTyped
  }
}
